<!DOCTYPE html>
<html>
<head>
	<title>{$name} | {$site_name}</title>
	<meta name="keywords" content="{$seo_keywords}" />
	<meta name="description" content="{$seo_description}">
	<tc_include file="Public:head" />
</head>
<body>
<tc_include file="Public:nav" />
<div class="container">
	<h2>【{$name}】相关文章</h2>

	<php> $lists = sp_sql_posts_paged("cid:$cat_id;order:post_date DESC;",20); </php>
	<div id="container">
		<div class="grid-sizer"></div>
		<volist name="lists['posts']" id="vo">
			<php>
				$smeta=json_decode($vo['smeta'], true);
			</php>

			<div class="item">
				<div class="tc-gridbox">
					<div class="header">
						<div class="item-image" style="padding-top:5px;">
							<a href="{:leuu('article/index',array('id'=>$vo['object_id'],'cid'=>$vo['term_id']))}">
								<if condition="empty($smeta['thumb'])">
									<img src="__TMPL__Public/assets/images/default-thumbnail.jpg" class="img-responsive" alt="{$vo.post_title}" width="250" height="200"/>
									<else />
									<img src="{:sp_get_asset_upload_path($smeta['thumb'])}"  class="img-responsive" alt="{$vo.post_title}" width="250" height="200"/>
								</if>
							</a>
						</div>
						<hr/>
						<h3><b><a href="{:leuu('article/index',array('id'=>$vo['object_id'],'cid'=>$vo['term_id']))}">{$vo.post_title}</a></b></h3>
						<hr/>
					</div>
					<div class="body">
						<a href="{:leuu('article/index',array('id'=>$vo['object_id'],'cid'=>$vo['term_id']))}">{$vo.post_excerpt|msubstr=0,256}</a>

					</div>

					<div class="footer">
						<hr style="height:1px;border:none;border-top:1px dashed #7b8690;"/>
						<div class="pull-left">
							<span class="meta" title="发表时间">{$vo.post_date}</span>
						</div>
						<div class="pull-right">
							<a href="javascript:;" title="阅读量"><i class="fa fa-eye"></i><span>{$vo.post_hits}</span></a>
							<a href="{:U('article/do_like',array('id'=>$vo['object_id']))}" class="js-count-btn" title="点赞"><i class="fa fa-thumbs-up"></i><span class="count">{$vo.post_like}</span></a>
							<a href="{:U('user/favorite/do_favorite',array('id'=>$vo['object_id']))}" title="收藏" class="js-favorite-btn" data-title="{$vo.post_title}" data-url="{:leuu('portal/article/index',array('id'=>$vo['object_id'],'cid'=>$vo['term_id']))}" data-key="{:sp_get_favorite_key('posts',$vo['object_id'])}">
								<i class="fa fa-star-o"></i>{$vo.post_like}
							</a>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</volist>
	</div>
	<!-- <div class="pagination"><ul>{$lists['page']}</ul></div> -->
	<div class="js-infinite-scroll-loading text-center" style="display: none;">正在加载...</div>
	<div id="nextpage"></div>
</div>
<tc_include file="Public:footer" />
<!-- JavaScript -->
<tc_include file="Public:scripts" />
<script src="__TMPL__Public/assets/js/imagesloaded.pkgd.min.js"></script>
<script src="__TMPL__Public/assets/js/masonry.pkgd.min.js"></script>
<script src="__TMPL__Public/assets/js/jquery.infiniteScroll.js"></script>
<script>

	$(function(){
		var $container= $('#container').masonry({
			columnWidth : '.grid-sizer',
			itemSelector : '.item'
		});

		$container.imagesLoaded().progress(function (imgLoad, image) {
			var msnry = $container.data('masonry');
			var itemSelector = msnry.options.itemSelector;
			var $item = $(image.img).parents(itemSelector);
			$('.tc-gridbox',$item).css('opacity',1);
			msnry.layout();
		});

		$('#nextpage').infiniteScroll({
			loading:'.js-infinite-scroll-loading',
			total_pages:{$lists['total_pages']},
			success:function(content){
				var $items=$(content).find('#container .item');
				if($items.length>0){
					//$('.tc-gridbox',$items).css('opacity',1);
					$container.append( $items )
					// add and layout newly prepended items
							.masonry( 'appended', $items );
					$items.imagesLoaded().progress(function (imgLoad, image) {
						var msnry = $container.data('masonry');
						var itemSelector = msnry.options.itemSelector;
						var $item = $(image.img).parents(itemSelector);
						$('.tc-gridbox',$item).css('opacity',1);
						msnry.layout();
					});
				}
			},
			finish:function(){

			}
		});
	});
</script>
</body>
</html>
